<template>
  <div class="personal-center">
    <div class="header-title">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
      >
        <el-menu-item index="1">个人信息</el-menu-item>
        <!-- <el-menu-item index="2">账号安全</el-menu-item> -->
        <el-menu-item index="3">个性化设置</el-menu-item>
      </el-menu>
    </div>
    <div class="personal-content">
      <div v-if="activeIndex === '1' || !activeIndex">
        <PersonalMessage />
        <!-- <FrontPersonalMessage /> -->
      </div>
      <!-- <div v-if="activeIndex === '2'">
        <AccountSecurity />
      </div> -->
      <div v-if="activeIndex === '3'">
        <PersonalSetting />
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed} from 'vue'
import PersonalMessage from './components/PersonalMessage'
// import { FrontPersonalMessage } from '@ruifox-cms/components'
// import AccountSecurity from './components/AccountSecurity'
import PersonalSetting from './components/PersonalSetting'
import { useRouter } from 'vue-router'
console.log('加载中心');

const router = useRouter()
const activeIndex = computed(() => router.currentRoute.value.query.type ? router.currentRoute.value.query.type : '1')
const handleSelect = (key) => {
  router.push({
    path: '/personal/center',
    query: {
      type: key
    }
  })
}
</script>

<style scoped lang="scss">
  .header-title{
    margin-bottom: 20px;
  }
</style>
